<template>
  <div class="nav-menu">
    <div class="logo">
      <img src="~@/assets/img/logo.svg" alt="" />
      <transition name="title">
        <div v-if="isFold" class="systemTitle">权权系统</div>
      </transition>
    </div>
    <el-menu
      background-color="#1D2B36"
      text-color="#fff"
      active-text-color="#409EFF"
      :collapse="!isFold"
      :default-active="defaultValue"
    >
      <template v-for="item in usermenus" :key="item.id + ''">
        <template v-if="item.type === 1">
          <!-- 顶层菜单可展开 -->
          <el-sub-menu :index="String(item.id)">
            <template #title>
              <template v-if="item.icon">
                <el-icon>
                  <component :is="getIcon(item)"></component>
                </el-icon>
              </template>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subitem in item.children" :key="subitem.id">
              <el-menu-item
                :index="String(subitem.id)"
                @click="jumpPage(subitem)"
              >
                <template v-if="subitem.icon">
                  <el-icon>
                    <component :is="getIcon(subitem)"></component>
                  </el-icon>
                </template>
                <span>{{ subitem.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <!-- 顶层菜单不能展开 -->
        <template v-else-if="item.type === 2">
          <el-menu-item :index="String(item.id)" @click="jumpPage(item)">
            <template v-if="item.icon">
              <el-icon>
                <component :is="getIcon(item)"></component>
              </el-icon>
            </template>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useStore } from '@/store/index';
import { defineProps, withDefaults, computed, ref } from 'vue';
import router from '@/router';
const store = useStore();
const usermenus = computed(() => {
  return store.state.login.userMenus;
});
/* 获取图标名字 */
const getIcon = (item: any) => {
  return item.icon.split('-').slice(2).join('-');
};
/* 折叠栏 */
const props = withDefaults(defineProps<{ isFold: boolean }>(), {
  isFold: false
});
/* 跳转路由 */
import emitter from '@/utils/eventbus';
const jumpPage = (payload: any) => {
  router.push(payload.url);
};
/* 解决菜单栏刷新后和当前页面不匹配的问题 */
import { _recurseGetId } from '@/utils/mapMenus';
import { useRoute } from 'vue-router';
const route = useRoute();
const currentPath = route.path;
const defaultValue = ref<string>('2');
defaultValue.value = _recurseGetId(usermenus.value, currentPath) + '' ?? '2';
</script>

<style scoped lang="less">
.title-enter-from,
.title-leave-to {
  opacity: 0;
}
.title-enter-to,
.title-leave-from {
  opacity: 1;
}
.title-enter-active,
.title-leave-active {
  transition: opacity 0.4s ease;
}
.nav-menu {
  width: 100%;
  // position: relative;
  .logo {
    // width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    // flex-direction: row;
    justify-content: flex-start;
    // background-color: pink;
    padding-top: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    img {
      width: 30px;
      height: 30px;
      margin-left: 18px;
    }
    .systemTitle {
      position: absolute;
      left: 50px;
    }
  }
  // .el-submenu {
  //   .el-menu-item {
  //     padding-left: 50px !important;
  //     background-color: #0c2135 !important;
  //   }
  // }
  .el-menu {
    border-right: none;
  }
  .el-menu-item:hover {
    color: #409eff !important; // 菜单
  }
  .el-menu-item.is-active {
    color: #fff !important;
    background-color: #0a60bd !important;
  }
}
</style>
